<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
            <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-s-promotion"></i> 后台管理
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/sys-admin/client/client' }">客户列表</el-breadcrumb-item>
            <el-breadcrumb-item>添加客户</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="宠物名称" prop="petName">
                <el-input v-model="ruleForm.petName"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="description">
                <el-input v-model="ruleForm.description"></el-input>
            </el-form-item>
            <el-form-item label="是否为vip" prop="vip">
                <el-switch
                        v-model="ruleForm.vip"
                        :active-value="1"
                        :inactive-value="0"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                      >
                </el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="warning" @click="$router.push('/sys-admin/client/client')">返回列表</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                roleListOptions: [],
                ruleForm: {
                    name: '',
                    petName: '',
                    phone: '',
                    email: '',
                    address : '',
                    description: '无',
                    vip:'0',

                },
                rules: {
                    name: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        {min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur'}
                    ],

                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url = 'http://localhost:9080/client/add-new';
                        console.log('url = ' + url);

                        let formData = this.qs.stringify(this.ruleForm);
                        console.log('formData = ' + formData);

                        let localJwt = localStorage.getItem('localJwt');

                        this.axios.create({
                            'headers': {
                                'Authorization': localJwt
                            }
                        }).post(url, formData).then((response) => {
                            let jsonResult = response.data;
                            if (jsonResult.state == 20000) {
                                this.$message({
                                    message: '添加客户成功！',
                                    type: 'success'
                                });
                                this.resetForm(formName);
                            } else {
                                this.$alert(jsonResult.message, '错误', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                    }
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        mounted() {
        }
    }
</script>